import { useEffect, useState } from "react";
import { BentoGrid, BentoGridItem } from "../../components/ui/bento-card";
import {
  IconArrowWaveRightUp,
  IconBoxAlignTopLeft,
  IconFileBroken,
  IconSignature,
} from "@tabler/icons-react";
import { IconCloud } from "../../components/ui/IconCloud";
import { Image, Skeleton } from "@heroui/react";
import { useDispatch, useSelector } from "react-redux";
import { invoke } from "@tauri-apps/api/core";
import { AnimatedTooltip } from "../../components/ui/animated-tooltip";
import {
  EvervaultCard,
  FileInfoCard,
} from "../../components/ui/evervault-card";
import { save_user_info } from "../../store/user/user";
import FileCard from "../../components/ui/FileCard";
export default function Home({ setUser }) {
  const user = useSelector((state) => state.user.user);
  const dispatch = useDispatch();
  const items = [
    {
      title: "预测模型",
      description: "Join the quest for understanding and enlightenment.",
      header: <Model />,
      icon: <IconArrowWaveRightUp className="h-4 w-4 text-neutral-200" />,
    },
    {
      title: "最近一次结果",
      description: "Discover the beauty of thoughtful and functional design.",
      header: <ResultImage state={user} />,
      icon: <IconSignature className="h-4 w-4 text-neutral-200" />,
    },
    {
      title: "应用技术栈",
      description: "Experience the thrill of bringing ideas to life.",
      header: <Cloud />,
      icon: <IconBoxAlignTopLeft className="h-4 w-4 text-neutral-200" />,
    },
    {
      title: "最近一次预测文件",
      description: "Dive into the transformative power of technology.",
      header: <FileInfo state={user} />,
      icon: <IconFileBroken className="h-4 w-4 text-neutral-200" />,
    },
  ];
  useEffect(() => {
    const load_state = async () => {
      console.log(user);

      if (user.username === null) {
        let res = await invoke("get_user_state");
        dispatch(save_user_info(res));
      }
    };
    load_state();
  });
  return (
    <>
      <div className="dark py-3 w-full h-full relative -bottom-4 flex justify-center items-center border-spacing-x-10 rounded-2xl border-gray-200">
        <BentoGrid className=" mx-auto">
          {items.map((item, i) => {
            return (
              <BentoGridItem
                key={i}
                title={item.title}
                header={item.header}
                icon={item.icon}
                className={
                  i === 0 || i === 3
                    ? "md:col-span-2 dark:bg-gray-900/[0.6] backdrop-blur-sm"
                    : "dark:bg-gray-900/[0.6] backdrop-blur-sm"
                }
              ></BentoGridItem>
            );
          })}
        </BentoGrid>
      </div>
    </>
  );
}
const FileInfo = ({ state }) => {
  let [loading, setLoading] = useState(true);
  let [file, setFile] = useState({
    filename: "",
    filesize: "",
  });
  useEffect(() => {
    const file_handler = async () => {
      let res = await invoke("get_file_info", { path: state.last_predict });
      setFile({ ...res });
      setLoading(false);
    };
    file_handler();
  }, [state]);
  return (
    <>
      {loading === false && (
        <div className="w-full h-full flex justify-center">
          <FileCard
            filename={file.filename}
            filesize={file.filesize}
            filelocation={state.last_predict.substring(
              0,
              state.last_predict.lastIndexOf("/")
            )}
          ></FileCard>
        </div>
      )}

      {loading === true && (
        <div>
          <Skeleton className="rounded-lg">
            <div className="h-48 rounded-lg bg-default-300" />
          </Skeleton>
        </div>
      )}
    </>
  );
};
const Model = () => {
  useEffect(() => {});
  return (
    <>
      <div className="w-full h-[80%] flex justify-center items-center">
        <PredictModel></PredictModel>
      </div>
    </>
  );
};
const PredictModel = ({ className, name, description }) => {
  const model = [
    {
      id: 1,
      name: "SEIR",
      designation: "Software Engineer",
      image: "https://cdn.simpleicons.org/python/python",
    },
    {
      id: 2,
      name: "SIR",
      designation: "Software Engineer",
      image: "https://cdn.simpleicons.org/python/python",
    },
  ];
  return (
    <>
      <FileInfoCard>
        <EvervaultCard>
          <div className="relative -left-1 flex justify-center">
            <AnimatedTooltip items={model}></AnimatedTooltip>
          </div>
        </EvervaultCard>
      </FileInfoCard>
    </>
  );
};
const Cloud = () => {
  const slugs = [
    "javascript",
    "react",
    "html5",
    "css3",
    "bun",
    "anaconda",
    "mysql",
    "nginx",
    "docker",
    "git",
    "github",
    "vscodium",
    "rust",
    "python",
    "trpc",
    "tailwindcss",
    "debian",
    "tauri",
    "nextui",
    "daisyui",
  ];

  const images = slugs.map((slug) => {
    if (slug === "rust" || slug === "nextui" || slug === "github") {
      return `https://cdn.simpleicons.org/${slug}/eee`;
    } else if (slug === "bun") {
      return "https://cdn.simpleicons.org/bun/beige";
    } else {
      return `https://cdn.simpleicons.org/${slug}`;
    }
  });

  return (
    <div className="relative flex size-full items-center justify-center overflow-hidden">
      <IconCloud images={images} />
    </div>
  );
};

const ResultImage = ({ state }) => {
  return (
    <>
      <Image
        height={190}
        width={400}
        src={`${state.last_result.substring(
          0,
          state.last_result.lastIndexOf(".")
        )}-black.png`}
        className=""
      ></Image>
    </>
  );
};
